<!--
*@Author: QWP
*@Description: 下拉新增公司
*@Date: 2024-09-27 15:12:48
-->
<template>
  <a-select
    v-bind="$attrs"
    :fieldNames="{ label: 'companyname', value: 'companyname' }"
    :options="tOptions"
    @change="selChange">
    <template #dropdownRender="{ menuNode: menu }">
      <v-nodes :vnodes="menu" />
      <a-divider style="margin: 4px 0" />
      <a-row class="f-w-100" :gutter="16">
        <a-col flex="1">
          <a-input ref="inputRef" v-model:value="form.companyname" placeholder="请输入公司" />
        </a-col>
        <u-icon-button itype="save" @click="addItem">保存</u-icon-button>
      </a-row>
    </template>
  </a-select>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, defineComponent, watch } from 'vue' 
import { useRoute, useRouter } from 'vue-router'
import { useBaseStore, useLoginStore } from '@/store'
import { storeToRefs } from 'pinia'
import * as contractCoopApi from '@/service/administration/contractCooperate'

const props = defineProps<{
  options: any[]
}>()

const { userInfo } = storeToRefs(useLoginStore())
const emits = defineEmits(['update:value', 'update:options', 'success']) 

const VNodes = defineComponent({
  props: {
    vnodes: {
      type: Object,
      required: true,
    },
  },
  render() {
    return this.vnodes;
  },
});

const form = ref({
  fkuserid: userInfo.value['userId'],
  reusername: userInfo.value['name'],
  fkdeptid: userInfo.value['deptId'],
  redeptname: userInfo.value['deptName'],
  fkunitsid: userInfo.value["unitId"],
  companyname: ''
})
const tOptions = ref<any[]>([])

// 新增项
const addItem = async () => {
  emits('update:value', form.value.companyname)
  tOptions.value.push({ companyname: form.value.companyname })
  emits('update:options', tOptions.value)
  try {
    const res = await contractCoopApi.add(form.value)
    if(res.code == 0) {
      emits('success')
    }
  } catch (error) {}
  form.value.companyname = ''
}

const selChange = (e) => {
  emits('update:value', e)
}

watch(() => props.options, (nval, oval) => {
  tOptions.value = nval || []
}, { immediate: true, deep: true })

</script>

<style lang='scss' scoped>
</style>